<template>
  <!-- 操作栏 -->
  <div class="header">
    <div class="header-title">
      <svg-icon name="file"></svg-icon>
      {{ $t('menus.File') }}
    </div>
    <div>
      <el-input
        v-model="queryForm.name"
        :placeholder="$t('btn.placeholder')"
        clearable
        :size="$store.getters.size"
        :prefix-icon="Search"
        class="header-input"
      ></el-input>
      <el-button
        type="primary"
        plain
        :icon="Search"
        :size="$store.getters.size"
        @click="initFileList"
        >{{ $t('btn.search') }}</el-button
      >
    </div>
  </div>
  <!-- 表格数据 -->
  <div>
    <el-table
      :data="tableData"
      stripe
      border
      :size="$store.getters.size"
      style="width: 100%"
    >
      <el-table-column align="center" type="index" width="50" />
      <el-table-column
        header-align="center"
        :width="item.width"
        :align="item.align"
        :prop="item.prop"
        :label="$t(`table.${item.label}`)"
        v-for="(item, index) in options"
        :key="item.id"
      >
        <!-- 操作 -->
        <template v-slot="{ row }" v-if="item.prop === 'action'">
          <el-button
            type="primary"
            :icon="View"
            circle
            :size="$store.getters.size"
            v-show="row.file_type.includes('image')"
            @click="preview(`${$common.apiUrl + row.file_url}`)"
          />
          <el-button
            :icon="Download"
            circle
            :size="$store.getters.size"
            @click="onDownloadFile(row.file_url, row.file_name)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryForm.page_num"
      :small="$store.getters.size === 'small' ? true : false"
      :page-size="queryForm.page_size"
      :page-sizes="pageSizes"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Search, View, Download } from '@element-plus/icons-vue'
import { preview } from 'v-preview-image'
import { options } from './options.js'
import { getFileList } from '@/api/system.js'
import { downloadFile } from '@/utils/common.js'

// 表格数据
const tableData = ref([])
// 总数
const total = ref(0)
// 搜索参数
const queryForm = ref({
  file_name: '',
  page_num: 1,
  page_size: 10
})
// 分页参数
const pageSizes = ref([20, 30, 40, 50, 100]) // 每页显示个数选择器的选项设置
const background = ref(true) // 是否为分页按钮添加背景色

// 搜索
const initFileList = async () => {
  const res = await getFileList(queryForm.value)
  tableData.value = JSON.parse(JSON.stringify(res.data))
  total.value = res.total
}
initFileList()

// 下载文件
const onDownloadFile = async (file_url, file_name) => {
  const response = await downloadFile(file_url)
  //此处返回的blob对象
  let blob = new Blob([response.data])
  let url = window.URL.createObjectURL(blob) // 创建 url 并指向 blob
  let a = document.createElement('a')
  a.href = url
  a.download = file_name
  a.click()
  window.URL.revokeObjectURL(url) // 释放该 url
}

// 初始化每页显示数量
const initPageSizes = () => {
  pageSizes.value.unshift(queryForm.value.page_size)
}
initPageSizes()

// 修改每页显示数量
const handleSizeChange = (pageSize) => {
  queryForm.value.page_num = 1
  queryForm.value.page_size = pageSize
  initFileList()
}

// 修改页码
const handleCurrentChange = (pageNum) => {
  queryForm.value.page_num = pageNum
  initFileList()
}
</script>
<style lang="scss" scoped>
@import './index.scss';
@import '@/styles/header.scss';
</style>
